<template>
    <view id="performanceReview">
       <uni-search-bar class="searchBar" :radius="100" placeholder="请输入赛事名称" clearButton="auto" @confirm="search" @cancel="cancel"></uni-search-bar>
       <uni-grid class="grid-bar" :column="3" :square="false" :show-border="false">
           <uni-grid-item class="grid-bar-item">
               <picker @change="cityChange" :value="indexOfCity" :range="city" range-key="text">
                   <button class="button" size="mini">{{city[indexOfCity].text}}<uni-icons class="icon" color="" size="8" type="arrowdown"></uni-icons></button>
               </picker>
           </uni-grid-item>
           <uni-grid-item class="grid-bar-item">
               <picker @change="scaleChange" :value="indexOfScale" :range="scale" range-key="text">
                   <button class="button" size="mini">{{scale[indexOfScale].text}}<uni-icons class="icon" color="" size="8" type="arrowdown"></uni-icons></button>
               </picker>
           </uni-grid-item>
           <uni-grid-item class="grid-bar-item">
               <picker @change="dateChange" :value="indexOfTime" :range="time" range-key="text">
               <!-- <picker @change="dateChange" fields="month" mode="date" :value="date" :start="startDate" :end="endDate"> -->
                   <button class="button" size="mini">{{time[indexOfTime].text}}<uni-icons class="icon" color="" size="8" type="arrowdown"></uni-icons></button>
               </picker>
           </uni-grid-item>
       </uni-grid>
       <view class="container">
           <view v-for="(item,index) in list" :key="index" class="list-box" @click="clickCard(item)">
                <view class="header">
                    <view class="title">{{item.title}}</view>
                    <view>
                        <view class="status"><uni-tag :text="item.scale" type="warning" size="small" :inverted="true" :circle="true"></uni-tag></view>
                        <view class="extra" :style="{color:item.color}">{{item.state}}</view>
                    </view>
                    <uni-icons type="arrowright" color="#bbbbbb" size="20" />
                </view>
                <view class="content">
                    <view class="content-item"><text>上报时间</text><text>{{item.time}}</text></view>
                    <view class="content-item"><text>上报机构</text><text>{{item.orgname}}</text></view>
                    <view class="content-item"><text>{{item.state_text}}</text><text>{{item.num}}</text></view>
                </view>
           </view>
           <!-- <view v-if="!list.length" class="empty-part">暂无数据</view> -->
           <!-- <view class="nodata" v-if="!list.length">
                <view class="msfont ms-wushuju"></view>
                <view class="">无数据</view>
           </view> -->
           <uni-load-more :status="moreStatus" ></uni-load-more>
        </view>
    </view>
</template>
<script>
    import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
    import uniGrid from "@/components/uni-grid/uni-grid.vue"
    import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import uniCard from '@/components/uni-card/uni-card.vue'
    import uniTag from "@/components/uni-tag/uni-tag.vue"
    import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
    import { cityList } from "@/common/area.js"
    import { getGradeList } from "@/common/api.js"
    export default {
        name: "performanceReview",
        data() {
            return {
                city:[],
                indexOfCity:0,
                scale:[
                    {text:'全部规模',value:''},
                    {text:'省级',value:1},
                    {text:'非省级',value:0},
                ],
                indexOfScale:0,
                time:[
                    {text:'时间',value:''},
                    {text:'2019年8月',value:'2019-08-01'},
                ],
                indexOfTime:0,
                date:'时间',
                startDate:'2017-07-01',
                endDate:'2050-01-01',
                list:[],
                pageSize:12,
                currentPage:1,
                keywords:'',
                totalPage:'',
                loadingType:false,
                moreStatus:'loading',
                isLoadingAll:false
            };
        },
        components: {
           uniSearchBar,uniGrid,uniGridItem,uniIcons,uniCard,uniTag,uniLoadMore
        },
        methods: {
            search(e){
                this.keywords=e.value
                this.getData()
            },
            cancel(e) {
                this.keywords=e.value
            	this.getData()
            },
            clickCard(item){
                uni.navigateTo({
                    url: `/pages/performanceReview/reviewDetails?id=${item.id}&title=${encodeURIComponent(item.title)}&scale=${encodeURIComponent(item.scale)}&state=${encodeURIComponent(item.state)}`
                });
            },
            cityChange(e){
                // console.log(e)
                uni.showLoading({
                    title: '加载中'
                });
                this.indexOfCity=e.detail.value;
                this.currentPage=1;
                this.getData()
            },
            scaleChange(e){
                uni.showLoading({
                    title: '加载中'
                });
                this.indexOfScale=e.detail.value
                this.currentPage=1;
                this.getData()
            },
            dateChange(e){
                uni.showLoading({
                    title: '加载中'
                });
                this.indexOfTime = e.detail.value
                this.date=this.time[e.detail.value].value;
                this.currentPage=1;
                this.getData()
            },
            getData(){
                getGradeList({
                    city:this.city[this.indexOfCity].value.slice(0,4),
                    time:this.date=='时间'?'':`${this.date+''}`,
                    pageSize:this.pageSize,
                    page:this.currentPage,
                    is_plan:this.scale[this.indexOfScale].value,
                    keywords:this.keywords,
                }).then((res)=>{
                    const data = res.data
                    uni.stopPullDownRefresh();
                    uni.hideLoading()
                    if(data.errcode==0){
                        this.list=[];
                        data.data.length && data.data.forEach((e)=>{
                            this.list.push({
                                id:e.id,
                                title:e.title,
                                scale: e.is_plan==1?'省级计划':'非省级计划',
                                state:['','待确认','待审核','待申领'][e.state],
                                color:['','#FFA158','#dd524d','#007aff'][e.state],
                                time:e.up_start?e.up_start.slice(0,10):'',
                                orgname:e.org_name,
                                num:e.group_num >> 0,
                                eventid:e.event_id,
                                state_text:['','待确认小组','待审小组','待申领小组'][e.state]
                            })
                        })
                        // this.isLoadingAll = this.list.length<data.totalPage
                        this.totalPage=data.totalPage;
                        if(data.totalPage==0){
                            this.moreStatus='noMore'
                        }else{
                            this.currentPage <= this.totalPage?this.moreStatus='noMore':this.moreStatus='more';
                        }
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        this.moreStatus='noMore';
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
            },
            formatNum(num){
                return num.toString().length==1?'0'+num:num
            },
            prepareTheData(){
                let under = uni.getStorageSync('account').under;
                this.city=[];
                this.city=[{text:'城市',value:''}].concat(cityList[this.$store.state.under+'0000']);

                // let now = new Date
                // this.date = now.toLocaleDateString().replace(/\//g,'-')
                let year = 2017;
                let month = 7;
                let endYear = 2025;
                let endMonth = 2;
                let counter=1
                this.time=[{text:'时间',value:''}];
                while(year<endYear || month<endMonth){
                    this.time.push({text:`${year}年${this.formatNum(month)}月`,value:`${year}-${this.formatNum(month)}-01`});
                    if(month>11){
                        year++;
                        month=0;
                    }
                    month++;
                    counter++;
                    if(counter>1000){break;}
                }
                // this.time.push({text:`${nowYear}年${nowMonth}月`,value:`${nowYear}-${nowMonth}-01`})
            }
        },
        onShow() {
            this.currentPage=1;
            this.prepareTheData()
            this.getData();
        },
        onPullDownRefresh(){
            this.currentPage=1;
            this.moreStatus = 'loading';
            this.getData()
        },
        onReachBottom(){
            if(this.loadingType){
                return false;
            }
            this.loadingType=true;
            this.currentPage++;
            this.currentPage<=this.totalPage && getGradeList({
                city:this.city[this.indexOfCity].value.slice(0,4),
                time:this.date=='时间'?'':`${this.date+'-01'}`,
                pageSize:this.pageSize,
                page:this.currentPage,
                is_plan:this.scale[this.indexOfScale].value,
                keywords:this.keywords,
            }).then((res)=>{ddddddddddd
                const data = res.data
                if(data.errcode==0){
                    data.data.length && data.data.forEach((e)=>{
                        this.list.push({
                            id:e.id,
                            title:e.title,
                            scale: e.is_plan==1?'省级计划':'非省级计划',
                            state:['','待确认','待审核','待申领'][e.state],
                            color:['','#FFA158','#dd524d','#007aff'][e.state],
                            time:e.up_start?e.up_start.slice(0,10):'',
                            orgname:e.org_name,
                            num:e.group_num >> 0,
                            eventid:e.event_id,
                            state_text:['','待确认小组','待审小组','待申领小组'][e.state]
                        })
                    })
                    this.currentPage <= this.totalPage?this.moreStatus='noMore':this.moreStatus='more';
                    this.loadingType=false;
                }else if(data.errcode==1000 || data.errcode==1001 || data.errcode==255){
                    uni.removeStorageSync('token');
                    uni.reLaunch({
                    	url:'/pages/home/welcome'
                    })
                }else{
                    uni.showToast({
                        icon: 'none',
                        title:data.msg
                    });
                }
            })
        }
    };
</script>
<style lang="scss">
    #performanceReview {
        position: relative;
        height: 100%;
        .searchBar{

        }
        .grid-bar{
            .grid-bar-item{
                height: 60rpx;
                background: #fff;
                .button{
                    // height: 50px;
                    width: 100%;
                    background: #fff;
                    &:after{
                        border-color: transparent;
                    }
                    .icon{
                        margin-left: 10rpx;
                    }
                }
            }
        }
        .container{
            .list-box{
                display: flex;
                flex: 1;
                box-shadow: 0 0 0 transparent;
                margin: 24rpx;
                background-color: #fff;
                position: relative;
                flex-direction: column;
                border-color: #e5e5e5;
                border-style: solid;
                border-width: 2rpx;
                border-radius: 6rpx;
                overflow: hidden;
                .header{
                    display: flex;
                    position: relative;
                    flex-direction: row;
                    padding: 24rpx;
                    align-items: center;
                    border-bottom-color: #e5e5e5;
                    border-bottom-style: solid;
                    border-bottom-width: 1px;
                    color: #333;
                    justify-content: space-between;
                    .title{
                        font-size: 30rpx;
                        // flex: 1;
                        font-weight: bold;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                        width: 440rpx;
                        text-align: left;
                        height: 112rpx;
                        overflow: hidden;
                    }
                    .status{
                        padding-top: 12rpx;
                    }
                    .extra{
                        font-size: 28rpx;
                        color: #FFA158;
                    }
                }
                .content{
                    padding: 24rpx;
                    .content-item{
                        display: flex;
                        justify-content: space-between;
                    }
                }
            },
            .empty-part{
                color: #999;
                font-size: 40rpx;
                text-align: center;
                margin-top: 40rpx;
            }
            .nodata{
                position: fixed;
                top: 50%;
                left: 50%;
                margin-left: -105rpx;
                margin-top: -147rpx;
                .ms-wushuju{
                    font-size: 150rpx;
                    color: #ccc;
                }
                view:last-child{
                    color: #aaa;
                    text-align: center;
                    margin-left: -20rpx;
                    margin-top: -55rpx;
                    font-size: 40rpx;
                }
            }
        }
    }
</style>
